<template>
  <div class="km-search">
    <div class="title">
      {{KmType === 'inner' ? $t('km.useForInternalSearch'): $t('km.useForOnlineCustomer')}}
    </div>
    <kmTree class="km-search-tree" :KmType="KmType" @recentUpdate="recentUpdate" @updateTreeData="updateTreeData" :type="'km'" :manage="false" ref="kmTree"></kmTree>
  </div>
</template>
<script>
  import kmTree from '@/components/business-modules/km/km-search/KmTree.vue'
  export default {
    name: 'kmSearch',
    props: {KmType: {type: String, default: 'inner'}},
    methods: {
      recentUpdate (recentUpdate) {
        this.$emit('recentUpdate', recentUpdate)
      },
      updateTreeData() {
        this.$emit('updateTreeData', this.$refs.kmTree.treeData.childs || [])
      }
    },
    components: {
      kmTree
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl";
  .km-search
    width 250px
    height calc(100vh - 53px)
    float left
    border-right 1px solid #d3d3d3
    .title
      padding-left 8px
      height 50px
      line-height 50px
      font-size 18px
      color $cf-gray4
      border-bottom 1px solid $cf-level5
  .km-search-tree
    height calc(100vh - 104px)
  .label
    line-height 30px
    text-align right
  .margin-t
    margin-top 20px
  .km-button
    min-width auto
    margin 10px 10px 0 0
  .error-title
    color $c-pink
  .padding10
    padding 10px 0
</style>
